<template>
  <div class="manage">
    <el-dialog
      :title="operateType ==='add' ? '新增用户' : '更新用户'"
      :visible.sync="isShow"
     >
      <common-form
        :formLabel="opertateFormLabel"
        :form="opertateForm"
        :inline="true"
        ref="form"
      >
      </common-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="addUser">+新增</el-button>
      <common-form
        :formLabel="formLabel"
        :form="searchForm"
        :inline="true"
        ref="form"
      >
      <el-button type="primary" @click="getList">搜索</el-button>
      </common-form>
    </div>
  <common-table
    :tableData="tableData"
    :tableLabel="tableLabel"
    :config="config"
    @changePage="getList()"
    @edit="editUser"
    @delete="delUser"
  ></common-table>
  </div>
</template>

<script>
import CommonForm from "../../components/CommonForm.vue";
import CommonTable from "../../components/CommonTable.vue"
import {getUser} from "../../api/data"
export default {
  name: "user",
  components: {
    CommonForm,
    CommonTable,
  },
  data() {
    return {
      operateType:'add',
      isShow:false,
      opertateFormLabel:[
        {
          model:'name',
          label:'姓名',
          type:'input'
        },
        {
          model:'age',
          label:'年龄',
          type:'input'
        },
        {
          model:'sex',
          label:'性别',
          type:'select',
          opts:[
            {
              label:'男',
              value:1
            },
            {
              label:'女',
              value:0
            }
          ]
        },
        {
          model:'birth',
          label:'出生日期',
          type:'date'
        },
        {
          model:'address',
          label:'地址',
          type:'input'
        },
      ],
      opertateForm : {
        name:'',
        age:'',
        addr:'',
        birth:'',
        sex:''
      },
      formLabel:[
        {
          model:'keyword',
          label:'',
          type:'input'
        }
      ],
      searchForm:{
        keyword:''
      },
      tableDatea:[],
      tableLabel:[
        {
          prop:"mame",
          label:'姓名',
        },
        {
          model:'age',
          label:'年龄',
        },
        {
          model:'sex',
          label:'性别',
        },
        {
          model:'birth',
          label:'出生日期',
        },
        {
          model:'address',
          label:'地址',
        },
      ],
      cnfig:{
        page:1,
        total:30
      }
    }
  },
  methods:{
    confirm() {
      if(this.operateType === 'edit') {
        this.$http.post('/user/edit',this.opertateForm).then(res =>{
          console.log(res);
          this.isShow = false
        })
      } else {
         this.$http.post('/user/add',this.opertateForm).then(res =>{
          console.log(res);
          this.isShow = false
        })
      }
    },
    addUser(){
        this.isShow = true
        this.operateType = 'add'
        this.opertateForm = {
          name:'',
          age:'',
          addr:'',
          birth:'',
          sex:''
        }
    },
    getList(){
      this.config.loading = true
      name ? (this.config.page = 1) : ''
      getUser(
        name
      ).then(res => {
        res.list.map(item => {
          item.sexLabel = item.sex === 0 ? '女' : '男'
          return item
        })
      })
    },
    editUser() {},
    delUser() {

    },
  }
};
</script>

<style lang="less" scoped>
.manage-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>